<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>舞剑</title>
  <link rel="stylesheet" href="swiper/swiper.min.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body class="loading">
<div class="loader-box" id="loading">
  <div class="loader-11"></div>
</div>
<div id="app">
  <audio autoplay="autoplay" ref="jk">
    <source src="source/jk.mp3" type="audio/mpeg">
  </audio>

  <div class="header">
    <div class="h-1200">
      <h1>
        <a href="/"><img src="images/logo.jpg" alt=""></a>
      </h1>
      <div class="nav">
        <ul @click="qr_show">
          <li>先天之序</li>
          <li>後天之序</li>
          <li>經典理論</li>
          <li>感悟札記</li>
          <li>壇主</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="news">
    <p>最新文章走马灯：</p>
    <div class="swiper-container">
      <div @click="qr_show" class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in news_list">{{item.title}}</div>
      </div>
    </div>
  </div>
  <div class="zt-content">
    <div class="abc">
      <div class="gong-list">
        <div @click="qr_show" class="gong" v-for="(item, index) in gong_list1">
          <img :src="item.pic2" class="top-image"/>
          <div class="gua">
            <div class="img" :style="{backgroundImage: 'url(' + item.zhutilist[item.now_index].pic2 + '), url(images/taiji-default.png)'}"></div>
          </div>

          <div class="info">
            <!--          <div class="title">{{item.ditle}}</div>-->
            <!--          <div class="content" :class="{show: gong_show_desc1[index]}"-->
            <!--               @click.stop="$forceUpdate(); gong_show_desc1[index] = !gong_show_desc1[index]">{{item.desc}}-->
            <!--          </div>-->

            <!-- 阁新闻 -->
            <div class="ge" :class="{active: item.news_open}">
              <div @click.stop="$forceUpdate(); item.news_open = !item.news_open" class="title">
                <span>{{item.ge_a}}</span>
                <img src="icons/you.png"/>
              </div>
              <div class="list" v-if="item.news_list.length > 0">
                <div class="ge_news" v-for="news in item.news_list">
                  <img :src="news.pic"/>
                  <div class="news-info">
                    <div class="news-title">{{news.title}}</div>
                    <div class="time">{{news.create_time}}</div>
                  </div>
                </div>
              </div>
              <div class="list nodata" v-else>
                暂无文章
              </div>
            </div>

            <!-- 商品 -->
            <div class="ge" :class="{active: item.goods_open}">
              <div @click.stop="$forceUpdate(); item.goods_open = !item.goods_open" class="title">
                <span>{{item.ge_b}}</span>
                <img src="icons/you.png" />
              </div>
              <div class="list" v:if="item.goods_list.length > 0">
                <div class="ge_news" v-for="goods in item.goods_list">
                  <img :src="goods.cover" />
                  <div class="news-info">
                    <div class="news-title">{{goods.name}}</div>
                    <div class="desc">{{goods.desc}}</div>
                  </div>
                </div>
              </div>
              <div class="list nodata" v-else>
                暂无商品
              </div>
            </div>

            <!-- 主题列表 -->
            <div class="ge" :class="{active: item.zt_open}">
              <div @click.stop="$forceUpdate(); item.zt_open = !item.zt_open" class="title">
                <span>新闻主题列表</span>
                <img src="icons/you.png"/>
              </div>
              <div class="list">
                <div class="ge_news zt" v-for="zt in item.zt_list">
                  <img :src="zt.pic"/>
                  <div class="news-info">
                    <div class="news-title">{{zt.title}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div @click="qr_show" class="page-center">
          <img src="images/index_top.png" class="top-img"/>
          <div class="phantoscope">
            <!--  太极  -->
            <img src="images/taiji.png" class="taiji"/>

            <!--  八季  -->
            <div :style="{backgroundImage: `url(${season.pic})`}" class="eight-season"></div>

            <!--  八卦  -->
            <img src="images/eight-gua.png" class="eight-gua"/>

            <!--  六十四卦  -->
            <div class="box-64">
              <div :style="{backgroundImage: item.list ? 'url(' + item.list[item.now_index].pic + ')' : ''}"
                   v-for="item in list64"
                   class="list64-item">
              </div>
            </div>
          </div>

          <div class="guide">
            <div class="title">使用指南</div>
            <div class="content" :class="{'two-line-ellipsis': open_instr}" @click.stop="open_instr = !open_instr">
              {{instr}}
            </div>
          </div>

          <img src="images/index_bottom.jpg" class="bottom-img"/>
        </div>

        <div @click="qr_show" class="gong" v-for="(item, index) in gong_list2">
          <img :src="item.pic2" class="top-image"/>
          <div class="gua">
            <div class="img" :style="{backgroundImage: 'url(' + item.zhutilist[item.now_index].pic2 + '), url(images/taiji-default.png)'}"></div>
          </div>
          <div class="info">
            <!--          <div class="title">{{item.ditle}}</div>-->
            <!--          <div class="content" :class="{show: gong_show_desc2[index]}"-->
            <!--               @click.stop="$forceUpdate(); gong_show_desc2[index] = !gong_show_desc2[index]">{{item.desc}}-->
            <!--          </div>-->

            <!-- 阁新闻 -->
            <div class="ge" :class="{active: item.news_open}">
              <div @click.stop="$forceUpdate(); item.news_open = !item.news_open" class="title">
                <span>{{item.ge_a}}</span>
                <img src="icons/you.png"/>
              </div>
              <div class="list" v-if="item.news_list.length > 0">
                <div bindtap="to_ge_detail" class="ge_news" v-for="news in item.news_list" wx:key="id">
                  <img :src="news.pic"/>
                  <div class="news-info">
                    <div class="news-title">{{news.title}}</div>
                    <div class="time">{{news.create_time}}</div>
                  </div>
                </div>
              </div>
              <div class="list nodata" v-else>
                暂无文章
              </div>
            </div>

            <!-- 商品 -->
            <div class="ge" :class="{active: item.goods_open}">
              <div @click.stop="$forceUpdate(); item.goods_open = !item.goods_open" class="title">
                <span>{{item.ge_b}}</span>
                <img src="icons/you.png" />
              </div>
              <div class="list" v-if="item.goods_list.length > 0">
                <div class="ge_news" v-for="goods in item.goods_list">
                  <img :src="goods.cover" />
                  <div class="news-info">
                    <div class="news-title">{{goods.name}}</div>
                    <div class="desc">{{goods.desc}}</div>
                  </div>
                </div>
              </div>
              <div class="list nodata" v-else>
                暂无商品
              </div>
            </div>

            <!-- 主题列表 -->
            <div class="ge" :class="{active: item.zt_open}">
              <div @click.stop="$forceUpdate(); item.zt_open = !item.zt_open" class="title">
                <span>新闻主题列表</span>
                <img src="icons/you.png"/>
              </div>
              <div class="list">
                <div class="ge_news zt" v-for="zt in item.zt_list">
                  <img :src="zt.pic"/>
                  <div class="news-info">
                    <div class="news-title">{{zt.title}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="xiatu" style="background-image: url('images/t-gun.jpg');">
        <img src="images/qingming.png" class="bg" />
      </div>
    </div>
    <div class="zt-right">
      <div class="zt-r-top">
        <img src="icons/kaishi.png" class="kaishi" :class="{zhuan: bgm}" @click="pause">
        今日：{{date_text}}<br>{{date_nong_text}}
      </div>
      <h3>浏览指南：</h3>
      <div class="zt-r-center">
        <img :src="zhinano.pic" alt="">
        <div class="desc">{{zhinano.content}}</div>
      </div>
      <h3>新闻列表：</h3>
      <div class="zt-r-bottom">
        <div @click="qr_show" class="ge_news" v-for="item in jichu">
          <img :src="item.pic"/>
          <div class="news-info">
            <div class="news-title">{{item.title}}</div>
            <div class="time">{{item.create_time}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <qrcode :show="qrcode_show"></qrcode>
  <div class="footer">
    <div class="f-1200">
      <div class="cont-box">
        <div class="bei">
          <span>備案編號：</span>
          <a href="http://beian.miit.gov.cn/">津ICP备17002251号-1</a>
        </div>
        <ul @click="qr_show">
          <li>先天之序</li>
          <li>後天之序</li>
          <li>經典理論</li>
          <li>感悟札記</li>
          <li>壇主</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<script src="js/vue2.6.10.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="swiper/swiper.min.js"></script>
<script src="js/calendar.js"></script>
<script src="js/vue-component.js"></script>
<script src="js/my.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      date_text: '',  // 日期
      date_nong_text: '',  // 农历日期
      scrollTop: 0,  // 页面滚动高度

      taiji_seed: 0,
      taiji_index: 0,  // 0 ~ 7 循环
      taiji_list: [],

      season_seed: 0,
      season: {},
      season_index: 0,
      season_list: [],

      center_coord: [0, 0],  // 中心点坐标
      half_eight_width: 0,  // 八卦半宽
      BaguaList: [],

      list64: [],
      list_64_in: false,

      instr: '',
      open_instr: true,

      gong_list1: [],
      gong_show_desc1: [false, false, false, false],
      gong_list2: [],
      gong_show_desc2: [false, false, false, false],

      qrcode_show: {
        value: false
      },

      news_list: [],  // 最新文章走马灯
      zhinano: {},  // 指南
      jichu: [],  // 基础理论列表

      bgm: false
    },
    created() {
      let date = new Date();
      this.date_text = date_format('yyyy-MM-dd', date);
      switch (date.getDay()) {
        case 0:
          this.date_text += ' 星期日';
          break;
        case 1:
          this.date_text += ' 星期一';
          break;
        case 2:
          this.date_text += ' 星期二';
          break;
        case 3:
          this.date_text += ' 星期三';
          break;
        case 4:
          this.date_text += ' 星期四';
          break;
        case 5:
          this.date_text += ' 星期五';
          break;
        case 6:
          this.date_text += ' 星期六';
          break;
      }
      let nong_date = calendar.solar2lunar(date.getFullYear(), date.getMonth() + 1, date.getDate());
      this.date_nong_text = `${nong_date.gzYear}年 ${nong_date.Animal}年 ${nong_date.gzMonth}月 ${nong_date.gzDay}日`;

      // 四季
      this.getJieqiList().then(() => {
        this.season = this.season_list[this.season_index];

        this.season_index++;
        this.season_seed = setInterval(() => {
          this.season = this.season_list[this.season_index];
          if (this.season_index !== 7) {
            this.season_index++;
          } else {
            this.season_index = 0;
          }
        }, 4000);
      });

      // 主题
      this.getXiangxianList().then(() => {
        this._list64_huan();

        setInterval(() => {
          this._list64_huan();
        }, 6000);
      });

      // 使用指南
      this.instruction();

      // 八宫
      this.getBaguaList().then(() => {
        setTimeout(() => {
          loading_close();
        }, 1000)
      });

      // 浏览指南
      this.zhinan();

      // 基础理论
      this.jichuList();
    },
    mounted() {
      this.homeNewsList().then(() => {
        new Swiper('.swiper-container', {
          slidesPerView: 5,
          // loopedSlides: 2,
          loop: true,
          speed: 1500,
          autoplay: {
            delay: 1000
          }
        })
      });
    },
    methods: {
      // 获取节气文章
      getJieqiList() {
        return ajax(this, 'index/getJieqiList').then(res => {
          fixed_img_path(res, 'pic', 2);
          this.season_list = res;
        });
      },
      _list64_huan() {
        for (let i = 0; i < this.list64.length; i++) {
          let sort = [7, 2, 3, 0, 4, 8, 5, 6, 1];
          if (i !== 4) {
            setTimeout(() => {
              this.list64[sort[i]].now_index = this.list64[sort[i]].now_index !== this.list64[sort[i]].list.length - 1 ? this.list64[sort[i]].now_index + 1 : 0;
            }, i < 4 ? (i + 1) * 750 : i * 750);
          }
        }
      },
      // 获取64象限文章
      getXiangxianList() {
        return ajax(this, 'index/zhutiList').then(res => {
          let list64 = [];
          for (let i = 0; i < res.length; i++) {
            fixed_img_path(res[i], 'pic', 2);
            list64.push({
              now_index: 0,
              in: true,
              list: res[i]
            });
          }

          list64.splice(4, 0, {});

          this.list64 = list64;

          let list1 = [list64[0].list[0].gong_id, list64[1].list[0].gong_id, list64[2].list[0].gong_id, list64[3].list[0].gong_id];
          let list2 = [list64[5].list[0].gong_id, list64[6].list[0].gong_id, list64[7].list[0].gong_id, list64[8].list[0].gong_id];
          for (let i = 0; i < list1.length; i++) {
            this.gongZhutiDetail(list1[i], this.gong_list1, i);
          }

          for (let i = 0; i < list2.length; i++) {
            this.gongZhutiDetail(list2[i], this.gong_list2, i);
          }
        });
      },
      // 使用指南
      instruction() {
        ajax(this, 'index/instruction').then(res => {
          this.instr = res;
        });
      },
      // 获取八卦文章
      getBaguaList() {
        return ajax(this, 'index/getGongList').then(res => {
          res.sort((a, b) => {
            return a.id_sort < b.id_sort ? -1 : 1;
          });
        });
      },
      // 获取宫详情
      gongZhutiDetail(id, list, index) {
        ajax(this, 'index/gongZhutiDetail', { id }).then(res => {
          fixed_img_path(res, 'pic2');
          fixed_img_path(res.zhutilist, 'pic2', 2);
          res.news_list = [];
          res.goods_list = [];
          res.zt_list = [];

          res.now_index = 0;

          list[index] = res;

          this.check_zhuti_all();

          this.ztList(id, list[index]);
          this.geNewsList(id, list[index]);
          this.goodsList(id, list[index]);
        });
      },
      // 主题全部加载完毕
      check_zhuti_all() {
        let all = true;
        for (let i = 0; i < this.gong_list1.length; i++) {
          if (!this.gong_list1[i] || this.gong_list1.length < 4) {
            all = false;
            break;
          }
        }
        for (let i = 0; i < this.gong_list2.length; i++) {
          if (!this.gong_list2[i] || this.gong_list2.length < 4) {
            all = false;
            break;
          }
        }
        if (all) {
          let gong_list = this.gong_list1.concat(this.gong_list2);
          let sort = [6, 2, 3, 0, 7, 4, 5, 1];
          setInterval(() => {
            for (let i = 0; i < 8; i++) {
              setTimeout(() => {
                gong_list[sort[i]].now_index = gong_list[sort[i]].now_index !== gong_list[sort[i]].zhutilist.length - 1 ? gong_list[sort[i]].now_index + 1 : 0;
              }, i * 750);
            }
          }, 6000);
        }
      },
      // 获取阁新闻
      geNewsList(id, gong) {
        let post = {
          ge_id: id,
          page: 1,
          perpage: 100
        };

        ajax(this, 'index/geNewsList', post).then(res => {
          fixed_img_path(res, 'pic', 2);
          gong.news_list = res;
          gong.news_open = false;
        });
      },
      // 获取商品列表
      goodsList(id, gong) {
        let post = {
          cate_id: id,
          page: 1,
          perpage: 100
        };

        ajax(this, 'shop/goodsList', post).then(res => {
          fixed_img_path(res, 'cover', 2);
          gong.goods_list = res;
          gong.goods_open = false;
        });
      },
      // 主题列表
      ztList(id, gong) {
        let post = {
          gong_id: id,
          page: 1,
          perpage: 100
        };

        ajax(this, 'index/ztList', post).then(res => {
          fixed_img_path(res, 'pic', 2);
          gong.zt_list = res;
          gong.zt_open = false;
        });
      },
      // 显示小程序二维码
      qr_show() {
        this.qrcode_show.value = true;
      },
      // 最新文章走马灯
      homeNewsList() {
        return ajax(this, 'index/homeNewsList').then(res => {
          fixed_img_path(res, 'pic', 2);
          this.news_list = res;
        });
      },
      // 指南
      zhinan () {
        ajax(this, 'index/zhinan').then(res => {
          fixed_img_path(res, 'pic');
          this.zhinano = res;
        });
      },
      // 基础理论列表
      jichuList() {
        ajax(this, 'index/jichuList').then(res => {
          fixed_img_path(res, 'pic', 2);
          this.jichu = res;
        });
      },
      pause() {
        let jk = this.$refs.jk;
        if (this.bgm) {
          jk.pause();
        } else {
          jk.play();
        }
        this.bgm = !this.bgm;
      }
    }
  });
</script>
</body>
</html>
